<template>
  <div class="collapse_com">
    <div class="cl_header f_r_b_c" @click="_toggleCollapse">
      <span class="cl_title">{{title}}</span>
      <span :class="['icon arrow gray',isCollapseFold?'right':'down']"></span>
    </div>
    <div :class="['cl_content',isCollapseFold?'fold':'unfold']">
      <slot></slot>
      <div class="inner_content" v-html="content"></div>
    </div>
    <div v-if="bottomBorder" class="border_bottom"></div>
  </div>
</template>

<script>
export default {
  name: "collapseCom",
  components: {},
  // inject: ["collapseParent"], //注入父组件传递下来的实例
  props: {
    title: {
      type: String,
      default: "标题"
    },
    content: {
      type: String,
      default: "内容"
    },
    isFold: {
      type: Boolean,
      default: true
    }
    // bottomBorder: {
    //   type: Boolean,
    //   default: true
    // }
  },
  data() {
    return {
      isCollapseFold: true,
      bottomBorder: true
    };
  },
  watch: {},
  computed: {},
  methods: {
    _toggleCollapse: function() {
      this.isCollapseFold = !this.isCollapseFold;
    }
  },
  created() {},
  mounted() {
    // console.log("this.collapseParent:", this.collapseParent);
  },
  destroyed() {}
};
</script>
<style lang="scss" scoped>
.collapse_com {
  width: 100%;
  .cl_header {
    padding: 17px 0;
    .icon {
      transition: all 0.35s ease;
      -webkit-transition: all 0.35s ease;
    }
    .cl_title {
      display: inline-block;
      width: calc(100% - 50px);
      font-size: 26px;
      color: #333333;
      // text-overflow: ellipsis;
      // overflow: hidden;
      white-space: pre-wrap;
    }
  }
  .cl_content {
    font-size: 24px;
    color: #555555;
    transition: all 0.35s ease;
    -webkit-transition: all 0.35s ease;
    position: relative;
    overflow-y: scroll;
    max-height: 400px;
    visibility: visible;
    background: white;
    padding: 0 30px;
    .inner_content {
      overflow: hidden;
      margin-bottom: 20px;
    }
  }
  .fold {
    height: 2px;
    visibility: hidden;
    overflow: hidden;
  }
  .unfold {
  }
  .border_bottom {
    border-bottom: 1px solid #d8d8d8;
  }
}
</style>